<template>
  <div :class="activeCard === activeIndex? 'active':''" class="chooseCard" @click="setActiveCard()">
    <div class='moneyShow'>{{cardItem.money}}元</div>
    <div class='startShow'>{{cardItem.startB}}个萌星币</div>
    <div class="presente" v-if='cardItem.presente'>送{{cardItem.presente}}币</div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'Vuex'

  export default{

    props: {
      cardItem: {
        type: Object,
        default()  {
          return []
        }
      },
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    computed: {
      ...mapGetters([
        'activeCard'
      ]),
    },
    methods: {
      setActiveCard(){
        this.$store.commit('SETACTIVECARD',this.activeIndex)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
  .chooseCard {
    width: 155px;
    height: 75px;
    border-radius: 15px;
    border: 1px solid rgb(250, 229, 137);
    margin: 0 20px 20px 0;
    font-size: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    &.active {
      background-color: rgb(255,209,35);
    }
    .presente {
      position: absolute;
      top: 0;
      right: 0;
      height: 20px;
      width: 66px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      border-top-right-radius: 15px;
      border-bottom-left-radius: 50px;
      background-color: rgb(255, 71, 7);
    }
    .moneyShow {
      padding-top: 16px;
      font-size: 16px;
    }
    .startShow {
      padding-top: 8px;
      color: #ccc;
    }
  }

</style>
